<template>
	<div>
        <h3>我是Message组件</h3>
		<ul>
			<li v-for="m in messageList" :key="m.id">
<!--            两种带有QueryString都可以    -->
<!--				<router-link :to="`/home/message/detail?id=${m.id}&title='${m.title}'`">{{ m.title }}</router-link>-->

                <router-link :to="{
                    path: '/home/message/detail',
                    // name: 'xiangqing', // 使用命名路由
                    query: {
                        id: m.id,
                        title: m.id
                    }
                }">
                    {{ m.title }}
                </router-link>
			</li>
            <hr>
            <h3>显示Detail组件内容</h3>
            <router-view></router-view>
		</ul>
	</div>
</template>

<script>
	export default {
		name:"Message",
    data() {
		  return {
		    messageList: [
          {id:"001", title: "消息001"},
          {id:"002", title: "消息002"},
          {id:"003", title: "消息003"},
        ]
      }
    }
	}
</script>